<template>
  <div id="left">
    <div
      class="personal_left_item"
      :class="menu == 'home_page' ?'active':''"
      @click="showPage('home_page')"
    >商城首页</div>
    <div class="line"></div>
    <div
      class="personal_left_item"
      :class="menu == 'person_info' ?'active':''"
      @click="showPage('person_info')"
    >个人信息</div>
    <div class="line"></div>
    <div
      class="personal_left_item"
      :class="menu == 'person_order' ?'active':''"
      @click="showPage('person_order')"
    >我的订单</div>
    <div class="line1"></div>
    <div
      class="personal_left_item"
      :class="menu == 'person_curriculum' ?'active':''"
      @click="showPage('person_curriculum')"
    >我的课程</div>
    <div class="line1"></div>
    <div
      class="personal_left_item"
      :class="menu == 'person_timetable' ?'active':''"
      @click="showPage('person_timetable')"
    >我的课表</div>
    <div class="line1"></div>
    <div
      class="personal_left_item"
      :class="menu == 'help_center' ?'active':''"
      @click="showPage('help_center')"
    >帮助中心</div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      menu: "person_curriculum",
      pathMap: {
        home_page: "/home_page/index",
        person_info: "/personal_center/person_info",
        person_order: "/personal_center/person_order",
        person_curriculum: "/personal_center/person_curriculum",
        person_timetable: "/personal_center/person_timetable",
        help_center:"/personal_center/help_center"
      }
    };
  },
  methods: {
    showPage: function(val) {
      vm.menu = val;
      router.push(vm.pathMap[val]);
    }
  },
  watch: {
    $route(to, from) {
      //监听路由变化
      //从新的路径中截取当前模块名,设置为当前菜单
      let path = to.path.substr(1);
      console.log(path);
      let list = path.split("/");
      vm.menu = list[1] == "curriculum_details" ? "person_curriculum" : list[1];
    }
  },
  created: function() {
    vm = this;
    // //从当前路径中截取当前模块名,设置为当前菜单
    let path = vm.$route.path.substr(1);
    console.log(path);
    let list = path.split("/");
    vm.menu = list[1] == "curriculum_details" ? "person_curriculum" : list[1];
  }
};
</script>

<style lang="scss" scoped>
#left {
  font-size: 0.16rem;
  color: #333333;

  .personal_left_item {
    height: 0.42rem;
    width: 100%;
    margin: 0.11rem 0rem;
    padding: 0.12rem 0.36rem;
    border-left: 0.06rem solid #ffffff;
    cursor: pointer;
  }
  .line {
    width: 100%;
    height: 1px;
    background: #eeeeee;
  }
  .line1 {
    width: 100%;
    height: 1px;
    background: #ffffff;
  }
  .active {
    border-left-color: #37a169;
    color: #37a169;
  }
}
</style>